<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header alitem curr" @click="backChange">
        <el-icon size="24" style="cursor: pointer">
          <ArrowLeftBold />
        </el-icon>
        <span>新建商品</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 1000px"
      :model="ruleForm"
      label-width="150px"
      :rules="rules"
    >
      <!-- 商品类型 -->
      <el-form-item label="商品类型" prop="bigTypeName" class="margintop">
        <el-button
          plain
          v-for="(item, index) in buttonTab"
          :key="index"
          :type="index === idxTab ? 'primary' : ''"
          @click="tabChange(item, index)"
        >
          {{ item }}
        </el-button>
      </el-form-item>

      <!-- 是否需要配送 -->
      <el-form-item label="" v-if="idxTab == 1">
        <el-checkbox
          v-model="checked1"
          label="是否需要配送"
          size="large"
          @change="checkChange"
        />
      </el-form-item>

      <!-- 提示信息 -->
      <el-form-item label="">
        <div
          v-if="idxTab == 0"
          style="color: rgb(164, 164, 164); font-size: 12px"
        >
          若选“专家填报”，提供“智能辅助填报”功能
        </div>
        <div
          v-if="idxTab == 2"
          style="color: rgb(164, 164, 164); font-size: 12px"
        >
          若选“志愿讲堂”，需要在志愿讲堂中开启“分类购买”方能正常使用
        </div>
      </el-form-item>

      <!-- 商品名称 -->
      <el-form-item label="商品名称" prop="name" class="margintop">
        <el-input v-model="ruleForm.name" placeholder="请输入商品名称" />
      </el-form-item>

      <!-- 商品简介 -->
      <el-form-item
        label="商品简介"
        prop="miniProgramDescription"
        class="margintop"
      >
        <el-input
          v-model="ruleForm.miniProgramDescription"
          type="textarea"
          :rows="5"
          placeholder="请输入商品详情"
        />
      </el-form-item>

      <!-- 排序 -->
      <el-form-item label="排序" prop="sort" class="mb20">
        <el-input-number v-model="ruleForm.sort" :min="0" />
      </el-form-item>

      <!-- 商品价格和折扣价格 -->
      <div class="flex">
        <el-form-item label="商品价格" prop="basePrice" class="margintop">
          <el-input-number v-model="ruleForm.basePrice" :min="0.01" />
          <div style="color: rgb(164, 164, 164)">（价格设置需≥0.01元）</div>
        </el-form-item>
        <el-form-item
          label="折扣价格"
          prop="realPrice"
          class="margintop"
          style="margin-left: 20px"
        >
          <el-input-number v-model="ruleForm.realPrice" :min="0.01" />
          <div style="color: rgb(164, 164, 164)">
            (折扣价为空，视为原价（价格设置需≥0.01元）
          </div>
        </el-form-item>
      </div>

      <!-- 封面图片 -->
      <el-form-item label="封面图片" prop="picUrl" class="margintop">
        <ImageUpload :limit="1" @update:modelValue="modelValue"></ImageUpload>
      </el-form-item>

      <!-- 封面描述 -->
      <el-form-item label="封面描述" prop="description" class="margintop">
        <el-input v-model="ruleForm.description" type="textarea" :rows="5" />
      </el-form-item>

      <!-- 轮播图片 -->
      <el-form-item label="轮播图片" prop="bannersPicUrl" class="margintop">
        <ImageUpload
          :is-show-tip="false"
          :limit="4"
          @update:modelValue="modelValuesChange"
        ></ImageUpload>
      </el-form-item>

      <!-- 详情介绍（电脑版） -->
      <el-form-item
        label="详情介绍(电脑版)"
        prop="pcDescription"
        class="margintop"
      >
        <UEditorPlus
          :id="id1"
          @update:modelValue="editorChange"
          v-model="content1"
        />
      </el-form-item>

      <!-- 详情介绍（移动端） -->
      <el-form-item
        label="详情介绍(移动端)"
        prop="appDescription"
        class="margintop"
      >
        <UEditorPlus
          :id="id2"
          @update:modelValue="editorPhoneChange"
          v-model="content2"
        />
      </el-form-item>

      <!-- 保存按钮 -->
      <el-form-item style="padding-left: 170px" class="margintop">
        <el-button
          type="primary"
          style="width: 170px"
          class="height40"
          @click="submitForm(ruleFormRef)"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { servicesCreate } from '@/api/service/service.js';

// 常量定义
const buttonTab = ['专家填报', '自营服务', '志愿讲堂'];
const id1 = 'addNewGood1';
const id2 = 'addNewGood2';

// 响应式数据
const checked1 = ref(false);
const idxTab = ref(0);
const content1 = ref('');
const content2 = ref('');
const ruleFormRef = ref(null);
const router = useRouter();

// 表单数据
const ruleForm = reactive({
  name: '',
  bigTypeId: '',
  bigTypeName: '专家填报',
  isNeedAddress: '0',
  picUrl: '',
  bannersPicUrl: '',
  pcDescription: '',
  appDescription: '',
  miniProgramDescription: '',
  sort: 0,
  basePrice: null,
  realPrice: null,
  description: '',
});

// 校验规则
const rules = reactive({
  name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  miniProgramDescription: [
    { required: true, message: '请输入商品详情', trigger: 'blur' },
  ],
  basePrice: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
  realPrice: [{ required: true, message: '请输入折扣价格', trigger: 'blur' }],
  picUrl: [{ required: true, message: '请上传封面图片', trigger: 'change' }],
  bannersPicUrl: [
    { required: true, message: '请上传轮播图片', trigger: 'change' },
  ],
  pcDescription: [
    { required: true, message: '请输入电脑版详情介绍', trigger: 'blur' },
  ],
  appDescription: [
    { required: true, message: '请输入移动端详情介绍', trigger: 'blur' },
  ],
});

// 方法定义
function editorPhoneChange(val) {
  ruleForm.appDescription = val;
}

function editorChange(val) {
  ruleForm.pcDescription = val;
}

function modelValuesChange(val) {
  ruleForm.bannersPicUrl = val;
}

function modelValue(val) {
  ruleForm.picUrl = val;
}

function tabChange(val, idx) {
  idxTab.value = idx;
  ruleForm.bigTypeId = JSON.stringify(idx);
  ruleForm.bigTypeName = val;
}

function checkChange(val) {
  ruleForm.isNeedAddress = val ? '1' : '0';
}

function submitForm(formEl) {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      servicesCreate(ruleForm).then((res) => {
        if (res.code === 20000) {
          ElMessage.success(res.msg);
          backChange();
        }
      });
    } else {
      ElMessage.error('请填写完整的表单信息');
    }
  });
}

function backChange() {
  router.go(-1);
}
</script>

<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

:deep(.el-form-item--default) {
  margin-bottom: 24px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}
</style>
